<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" :height="pageHeight + 'px'">
    <template #top>
      <uNavbar
        back-text=""
        :title="functionName"
        :is-back="!curPageIsHaveTab"
        :background="navBackground"
        back-icon-size="30rpx"
        :is-fixed="false"></uNavbar>
    </template>
    <view w-full pa-40rpx box-border>
      <nut-swiper height="280rpx" :pagination-visible="true" auto-play="5000">
        <nut-swiper-item v-for="item in swiperList" :key="item.goodsId">
          <image mode="aspectFill" w-670rpx h-280rpx rounded-20rpx :src="item.img" @click="toTicketDetail(item)" />
        </nut-swiper-item>
      </nut-swiper>
      <view w-full flex justify-between items-center mt-20rpx>
        <nut-menu :active-color="'#FCC300'">
          <nut-menu-item v-model="goodsType" @change="handleChange" :options="typeOptions"></nut-menu-item>
        </nut-menu>
      </view>
      <view w-full box-border :class="{ 'row-1-col-2': ticketStyleType == '2' }">
        <template v-for="(item, index) in dataList" :key="index">
          <ticketListItem
            :item="item"
            :ticketStyleType="ticketStyleType"
            @click="toTicketDetail(item)"></ticketListItem>
        </template>
      </view>
    </view>
  </z-paging>
  <tabbar></tabbar>
</template>

<script setup lang="ts">
import { getTicketGoodsStyle, getTicketGoodsList } from '@/api/ticketGoods'
import { useTabbarStore } from '@/store'
// import type { ToastInst } from 'nutui-uniapp'
import uNavbar from '@/components/navbar/index.vue'
import ticketListItem from '@/pages/ticket/components/ticketListItem.vue'
import { onLoad } from '@dcloudio/uni-app'
import config from '@/config/config'
const navBackground = ref({
  background: 'url(' + config.yellowNavBg + ') no-repeat'
})
const functionName = ref('在线购票')
const ticketStyleType = ref('1')
const dataList = ref<any>([])
const paging = ref<any>(null)
  const tabbarStore = useTabbarStore()
const tabbarList = tabbarStore.tabbarList.map((i) => i.linkUrl)
const curPageIsHaveTab = ref(false)
interface SwiperItem {
  img: string
  goodsId: number
}
const pageHeight = computed(() => {
  const systemInfo: any = uni.getWindowInfo()
  const pages = getCurrentPages() // 获取当前页面栈
  const currentPage = pages[pages.length - 1] // 当前页面
  const currentPath = `/${currentPage.route}` // 获取当前页面路径
  curPageIsHaveTab.value = tabbarList.includes(currentPath)
  return curPageIsHaveTab.value
    ? systemInfo.screenHeight -
    (systemInfo.screenWidth / 750) * 120
    : systemInfo.screenHeight
})
const swiperList = ref<SwiperItem[]>([])
const goodsType = ref('')
const typeOptions = ref([
  { text: '全部', value: '' },
  { text: '电子票', value: '1' },
  { text: '智能卡', value: '2' }
])

function handleChange(e: any) {
  console.log('切换type', e)
  paging.value.reload()
}

function toTicketDetail(item: SwiperItem) {
  console.log('轮播点击', item)
  if (!item.goodsId) {
    return
  }
  uni.navigateTo({
    url: '/pages/ticket/ticketDetail?id=' + item.goodsId
  })
}

const queryList = (pageNo: number, pageSize: number) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getTicketGoodsList({
    goodsType: goodsType.value,
    pageNumber: pageNo,
    pageSize: pageSize
  })
    .then((res: any) => {
      paging.value.complete(res.data.result.records)
    })
    .catch((res) => {
      paging.value.complete(false)
    })
}

onLoad((options: any) => {
  if (tabbarStore.activeTabName && curPageIsHaveTab.value) {
    functionName.value = tabbarStore.activeTabName
  }
  if (options.functionsName) {
    functionName.value = options.functionsName
  }
  getTicketGoodsStyle().then((res: any) => {
    console.log('分类样式', res)
    ticketStyleType.value = res.data.result.ticketStyleType
    swiperList.value = res.data.result.goodsTicketStyleImgList.map((item: any) => ({
      img: item.img,
      goodsId: item.goodsId
    }))
  })
})

// onReachBottom(() => {
//   console.log('触底函数')
//   categoryRef.value.loadMore()
// })
// onPageScroll((e) => {
//   categoryRef.value.pageScroll(e)
// })
</script>
<style>
page {
  background-color: #fff;
  --nut-menu-bar-box-shadow: none;
}
</style>
<style scoped lang="scss">
.row-1-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30rpx;
}
</style>
